/*Navigatiebalk*/
.NavBar ul {
    background-color: #1b1b11;
    list-style-type: none;
    margin: 0; 
    padding: 0;
    overflow:hidden;
}

.NavBar li {
    float: left;
}

.NavBar li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}  
.NavBar li a:hover{
    background-color: rgb(0, 73, 0);
} 
/*Index layout*/

.Titel { grid-area: header; }
.Poster { grid-area: menu; }
.nieuws { grid-area: main; }
.donut { grid-area: right; }
.Aanmelden { grid-area: footer; }


.LayoutIndex {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  gap: 10px;
  background-color: #004507;
  padding: 10px;
}

.LayoutIndex > div {
  background-color: rgba(196, 254, 204, 0.8);
  text-align: center;
  padding: 10px 6px;
  font-size: 30px; 
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

/*Stemmen Layout*/ 
.ChatGPT { grid-area: ChatGPT; }
.Oplossingen { grid-area: Oplossingen; }
.Stemmen { grid-area: Stemmen; }
.Agenda { grid-area: Agenda; }
.Doneren { grid-area: Doneren; }


.LayoutStemmen {
    display: inline-grid;
    grid-template-areas:
    'ChatGPT ChatGPT ChatGPT ChatGPT ChatGPT ChatGPT'
    'ChatGPT ChatGPT ChatGPT ChatGPT ChatGPT ChatGPT'
    'Oplossingen Oplossingen Stemmen Stemmen Doneren Doneren'
    'Oplossingen Oplossingen Agenda Agenda Doneren Doneren';
    gap: 10px;
    background-color:#004507;
    padding: 10px;
}

.LayoutStemmen > div {
  background-color: rgba(196, 254, 204, 0.8);
  text-align: center;
  padding: 10px 6px;
  font-size: 15px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
/*Contact Layout:*/
.contactmanieren { grid-area: Contact; }
.OnzeGeschiedenis { grid-area: Geschiedenis; }
.Berijkbaarheid { grid-area: Berijk; }
.Trailer { grid-area: Trailer; }
.MedewerkerVanDeMaand { grid-area: Mvdm; }


.ContactLayout {
    display: inline-grid;
    grid-template-areas:
    'Contact Contact Contact Geschiedenis Trailer Trailer'
    'Contact Contact Contact Geschiedenis Mvdm Mvdm'
    'Berijk Berijk Berijk . Mvdm Mvdm';
    gap: 10px;
    background-color:#004507;
    padding: 10px;
}

.ContactLayout > div {
  background-color: rgba(196, 254, 204, 0.8);
  text-align: center;
  padding: 10px 6px;
  font-size: 15px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
/*Layout Info*/
.Regel1 { grid-area: 1; }
.Regel2 { grid-area: 2; }
.Regel3 { grid-area: 3; }
.Regel4 { grid-area: 4; }
.Regel5 { grid-area: 5; }


.LayoutInfo {
    display: inline-grid;
    grid-template-areas:
    '1 1 3 4 4 4'
    '2 2 3 5 5 5'
    '2 2 3 5 5 5';
    gap: 10px;
    background-color:#004507;
    padding: 10px;
}

.LayoutInfo > div {
  background-color: rgba(196, 254, 204, 0.8);
  text-align: center;
  padding: 10px 6px;
  font-size: 15px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

 
 
 .Titel h2{
    font-size: 21px;
}

.OP{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.stemmen{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.contactmanieren a{
    text-decoration: none;
    color:black;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.contactmanieren p{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}